<template>
	<view class="view_box">
		<div class="logo_box">
			<img class="logo_img" src="https://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png"
				alt="">
			<span class="title">登录</span>
		</div>
		<div class="out_box">
			<div class="login_box" v-if="isShow == false">
				<TabMenu :titleList='titleList' @tab-changed ='tabChanged'></TabMenu>
				<div class="login_info_box">
					<div class="login_tip">
						关于穷游网将实行<span style="color: #28b76c;">手机绑定实名制的说明</span>
					</div>
					<div class="input_box account_box">
						<input @blur="check('account')" v-model="checkData.account.val" type="text" class="input" placeholder="手机号">
						<div class="err_tip" v-if="!checkData.account.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{checkData.account.errInfo}}</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<div class="input_box password_box" v-if="tabIndex ==0">
						<input @blur="check('password')" type="password" v-model="checkData.password.val" class="input" placeholder="密码">
						<div class="err_tip" v-if="!checkData.password.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{checkData.password.errInfo}}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<div class="input_box meg_code_box" v-if="tabIndex ==1">
						<input @blur="check('msgCode')" type="text" v-model="checkData.msgCode.val" class="input" placeholder="验证码">
						<button class="get_msg_code" onclick="getMsgCode(1)">获取验证码</button>
						<div class="err_tip" v-if="!checkData.msgCode.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{checkData.msgCode.errInfo}}</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<button class="login_but" @click="toLogin()">
						登录
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>没有穷游帐号？</span>
						<span style="color: #28b76c;" @click="show()">立即注册</span>
						<span class="info">境外手机号登录</span>
					</div>
				</div>
			</div>
			<div class="register_box" v-if="isShow">
				<div class="login_info_box">
					<div class="input_box account_box">
						<input type="text" @blur="check('phoneNum')"  class="input" placeholder="手机号" v-model="registerData.phoneNum.val">
						<div class="err_tip" v-if="!registerData.phoneNum.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.phoneNum.errInfo}}</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<div class="input_box password_box">
						<input type="password" @blur="check('password')" class="input" placeholder="密码" v-model="registerData.password.val">
						<div class="err_tip" v-if="!registerData.password.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.password.errInfo}}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<div class="input_box meg_code_box">
						<input type="text" @blur="check('msgCode')" class="input" placeholder="验证码" v-model="registerData.msgCode.val">
						<button class="get_msg_code" onclick="getMsgCode(2)">获取验证码</button>
						<div class="err_tip" v-if="!registerData.msgCode.isShow">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.msgCode.errInfo}}</span>
						</div>
						<div class="err_tip" v-else>
						</div>
					</div>
					<button class="login_but" onclick="toRegister()">
						注册
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>已有穷游帐号？</span>
						<span style="color: #28b76c;" @click="show()">登录</span>
						<span class="info">同意<span style="color: #28b76c;">会员条款</span>和<span
								style="color: #28b76c;">免责声明</span>
						</span>
					</div>
				</div>
			</div>
			<div class="bg_box">
		
			</div>
		</div>
	</view>
</template>

<script>
	import TabMenu from '../components/TabMenu.vue'
	import constants from '../common/constants.js'
	export default{
		name:'QyLogin',
		components:{
			TabMenu
		},
		data() {
			return{
				titleList:['账号登录','短信快捷登录'],
				tabIndex:0,
				isShow:false,
				config:constants.VALIDATE_CONFIG,
				checkData:{
					account:{
						val:'',
						errInfo:'',
						isShow:true
					},
					password:{
						val:'',
						errInfo:'',
						isShow:true
					},
					msgCode:{
						val:'',
						errInfo:'',
						isShow:true
					},
				},
				registerData:{
					phoneNum:{
						val:'',
						errInfo:'',
						isShow:true
					},
					password:{
						val:'',
						errInfo:'',
						isShow:true
					},
					msgCode:{
						val:'',
						errInfo:'',
						isShow:true
					}
				}
			}
		},
		methods:{
			tabChanged(index){
				this.tabIndex =index
			},
			show(){
				if(this.isShow){
					this.isShow = false
				}else{
					this.isShow = true
				}
			},
			check(key){
				// const key =e.target.getAttribute('data-type');
				const validataInfo = this.config[key];
				if(this.isShow){
					console.log('进行登录验证');
					if(validataInfo.regExp.test(this.checkData[key].val)){
						this.checkData[key].isShow = true
						return true
					}else{
						this.checkData[key].isShow = false
						this.checkData[key].errInfo = validataInfo.tipInfo
						return false
					}
				}else{
					console.log('进行注册验证');
					if(validataInfo.regExp.test(this.registerData[key].val)){
						this.registerData[key].isShow = true
					}else{
						this.registerData[key].isShow = false
						this.registerData[key].errInfo = validataInfo.tipInfo
					}
				}
				
			}
		}
	}
</script>

<style>
	@import url('../../public/public.scss');
	
	.view_box {
		height: 100%;
		background-image: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.logo_box {
		.logo_img {
			width: 126.5px;
			height: 46px;
		}
	
		.title {
			font-size: 24px;
			color: #fff;
			text-shadow: 0 0 4px rgba(0, 0, 0, .3);
			line-height: 46px;
			vertical-align: bottom;
		}
	}
	
	.out_box {
		display: flex;
		align-items: center;
		.login_box,.register_box{
			width: 380px;
			box-sizing: border-box;
			padding: 24px 24px;
			background-color: #FFFFFF;
			
			.underline {
				position: absolute;
				width: 165px;
				height: 100%;
				line-height: 30px;
				border-bottom: 2px solid #28b76c;
				bottom: 1px;
				color: hsla(0, 0%, 100%, 0);
				font-size: 18px;
				cursor: pointer;
				transition: left 0.2s linear;
			}
			.login_info_box{
				width: 100%;
				.login_tip {
					width: 100%;
					font-size: 14px;
					line-height: 60px;
					height: 50px;
					color: #959595;
				}
				.input_box {
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 100%;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.err_tip {
						width: 100px;
						height: 30px;
						line-height: 30px;
						color: #ff654c;
						font-size: 12px;
						display: flex;
						align-items: center;
				
						.err_icon {
							flex-shrink: 0;
							width: 12px;
							height: 12px;
							margin-bottom: -2px;
							margin-right: 4px;
						}
				
						.err_info {
							flex-shrink: 0;
						}
				
						.info {
							width: 100%;
							text-align: end;
							color: #959595;
							cursor: pointer;
						}
					}
				}
				.meg_code_box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
				
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 200px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.get_msg_code {
						display: inline-block;
						box-sizing: border-box;
						border: 0;
						padding: 0 15px;
						width: 125px;
						height: 40px;
						line-height: 36px;
						border-radius: 3px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
						vertical-align: top;
						background-color: #3f9f5f;
					}
				}
				.login_but {
					display: inline-block;
					box-sizing: border-box;
					border: 0;
					padding: 0 15px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					border-radius: 3px;
					font-size: 16px;
					color: #fff;
					cursor: pointer;
					vertical-align: top;
					background-color: #3f9f5f;
				}
				.login_auth_box {
					width: 100%;
					box-sizing: border-box;
					padding: 40px 12px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				
					.auth_icon {
						width: 40px;
						height: 40px;
					}
				}
				
				.bottom_tip {
					width: 100%;
					padding: 10px 0;
					height: 20px;
					line-height: 20px;
					color: #959595;
					font-size: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
				
					.info {
						width: 100%;
						text-align: end;
						flex-shrink: 1;
					}
				}
				
				.bottom_tip span {
					flex-shrink: 0;
				}
			}
		}
		.bg_box {
			width: 275px;
			height: 100%;
			background-repeat: no-repeat;
			background-image: url(https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM);
			background-color: #f5f5f5;
			background-position: 50%;
			background-size: auto 100%;
		}
	}
</style>